<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            font-size: 14px;
            text-align: center;
        }
        .lyb {
            width: 100%;
            height: 100px;
            border-bottom: 1px solid #ccc;
        }
        .sj {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <!-- 第一步 先写页面样式 -->
    <div id='con'>
    </div>
    <div style="margin-top: 20px;">
        标题： <input type="text" id='title'><br>
        内容： <textarea name="" id="content" cols="30" rows="10" style="margin-top: 10px;"></textarea>
        <br>
        <button id='sub'>发布留言</button>
    </div>
</body>
<script>
    var http = null
    //第二部 将留言板的数据改成服务器存储 去读取显示
    //1. 页面加载事件
    window.onload = function () {
        //监听发布留言按钮 点击事件
        document.getElementById('sub').addEventListener('click', function () {
            //获取留言的内容和标题
            var title = document.getElementById('title').value,
                content = document.getElementById('content').value

            //定义添加的数据对象
            var obj = "title=" + title + "&con=" + content
            ajax('http://192.168.1.119/api/lysend.php', 'POST', obj, function () {
                if (http.readyState == 4 && http.status == 200) {
                    if (JSON.parse(http.responseText).code == 200) {
                        getList() //刷新列表
                    }
                }
            })
        })
        getList()
    }

    function ajax(url, method = "GET", params = null, func) {
        http = new XMLHttpRequest()
        //true 异步 同时执行多个请求   false 同步 按顺序执行请求
        http.open('POST', url, true)
        http.onreadystatechange = func
        if (method == 'POST') {
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        http.send(params)
    }

    //获取服务器留言列表数据
    function getList() {
        //获取服务器数据
        ajax('http://192.168.1.121/api/lylist.php', 'GET', "", function () {
            if (http.readyState == 4 && http.status == 200) {
                var res = JSON.parse(http.responseText)
                if (res.code == 200) {
                    htmlStr = "" //定义模板拼接空字符串变量
                    console.log(res);
                    for (let i in res.data) { //循环服务器数据
                        //拼接模板
                        htmlStr += `<div class="lyb">
                                        <h3>${res.data[i].title}</h3>
                                        <div>
                                            ${res.data[i].con}
                                        </div>
                                        <div class="sj">${res.data[i].send_time} <a href="#" onclick='del(${res.data[i].id})'>删除</a></div>
                                    </div>`
                    }
                    //把拼接好的模板 写入到相对位置
                    document.getElementById('con').innerHTML = htmlStr
                } else {
                    // alert(data.msg)
                    document.getElementById('con').innerHTML = '暂时没有数据了'
                }
            }
        })
    }
    //删除函数 参数 下标
    function del(id) {
        console.log(id);
        ajax('http://192.168.1.121/api/lybdel.php?id=' + id, 'GET', "", function () {
            if (http.readyState == 4 && http.status == 200) {
                var data = JSON.parse(http.responseText)
                if (data.code == 200) {
                    getList()
                }
            }
        })
    }
</script>

</html>